import React, { useState } from 'react';
import { Card, Space, Typography, message, Divider } from 'antd';
import ReplyBox from '@/components/ReplyBox';

const { Title, Paragraph } = Typography;

const ReplyBoxDemo: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (content: string) => {
    setLoading(true);
    // 模拟提交过程
    setTimeout(() => {
      message.success(`回复内容：${content}`);
      setLoading(false);
    }, 1000);
  };

  const handleCancel = () => {
    message.info('已取消回复');
  };

  return (
    <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
      <Title level={2}>回复框组件演示</Title>
      <Paragraph>
        这是一个简洁清晰的回复框组件，采用现代化设计风格，支持响应式布局。
      </Paragraph>

      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 基础回复框 */}
        <Card title="基础回复框" size="small">
          <ReplyBox
            targetUsername="苏子怅然"
            onSubmit={handleSubmit}
            loading={loading}
          />
        </Card>

        <Divider />

        {/* 带取消按钮的回复框 */}
        <Card title="带取消按钮的回复框" size="small">
          <ReplyBox
            targetUsername="张三"
            onSubmit={handleSubmit}
            onCancel={handleCancel}
            showCancel={true}
            loading={loading}
          />
        </Card>

        <Divider />

        {/* 自定义占位符的回复框 */}
        <Card title="自定义占位符" size="small">
          <ReplyBox
            placeholder="请输入您的回复内容..."
            onSubmit={handleSubmit}
            submitText="发送"
            loading={loading}
          />
        </Card>

        <Divider />

        {/* 限制字符数的回复框 */}
        <Card title="限制字符数（100字）" size="small">
          <ReplyBox
            targetUsername="李四"
            onSubmit={handleSubmit}
            maxLength={100}
            loading={loading}
          />
        </Card>
      </Space>
    </div>
  );
};

export default ReplyBoxDemo;